<script setup>
import {deleteTableRow} from "../../../../utils/utils.js";



const props = defineProps({
   ports: {
     type: Array,
     default: [],
   }
})

// 定义添加端口的函数
const addPort=()=>{
    const port= {
      name: '',
      containerPort: 8080,
      protocol: 'TCP',
    }

  props.ports.unshift(port)
  console.log("props.ports",props.ports)
}

</script>

<template>
    <el-table border :data="props.ports"  >
       <el-table-column align="center" prop="name" label="端口名称">
         <template #default="scope">
           <el-form-item label-width="0" style="margin-bottom: 0">
             <el-input v-model.trim="scope.row.name" placeholder="端口名称"/>
           </el-form-item>
         </template>
       </el-table-column>
      <el-table-column align="center" prop="containerPort" label="程序端口">
        <template #default="scope">
          <el-form-item label-width="0" style="margin-bottom: 0">
            <el-input-number :min="1" :max="65535" :controls="false" v-model.trim="scope.row.containerPort" placeholder="程序端口" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="protocol" label="协议">
        <template #default="scope">
          <el-form-item label-width="0" style="margin-bottom: 0">
            <el-select v-model="scope.row.protocol">
                <el-option
                  v-for="item in ['TCP','UDP','SCTP']"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
<!--      <el-table-column align="center" prop="hostIP" label="外部端口绑定到哪个主机IP">-->
<!--        <template #default="scope">-->
<!--          <el-form-item>-->
<!--            <el-select v-model="scope.row.hostIP">-->
<!--              <el-input :controls="false" v-model.trim="scope.row.hostIP" placeholder="外部端口绑定到哪个主机IP" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column align="center" prop="hostIP" label="外部端口绑定到哪个主机IP">
        <template #default="scope">
          <el-form-item  label-width="0" style="margin-bottom: 0">
            <el-input-number :controls="false" v-model.trim="scope.row.hostIP" placeholder="外部端口绑定到哪个主机IP" />
          </el-form-item>
        </template>
      </el-table-column>
<!--      <el-table-column align="center" prop="hostPort" label="主机上暴露的端口号">-->
<!--        <template #default="scope">-->
<!--          <el-form-item>-->
<!--            <el-select v-model="scope.row.hostPort">-->
<!--              <el-input :min="1" :max="65535" :controls="false" v-model.trim="scope.row.hostPort" placeholder="外部端口绑定到哪个主机IP" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column align="center" prop="hostPort" label="主机上暴露的端口号">
        <template #default="scope">
          <el-form-item label-width="0" style="margin-bottom: 0">
            <el-input-number :min="1" :max="65535" :controls="false" v-model.trim="scope.row.hostPort" placeholder="主机上暴露的端口号" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="protocol" label="协议">
        <template #header>
          <el-button link type="primary" @click="addPort()">
            添加
          </el-button>
        </template>
        <template #default="scope">
          <el-button link type="warning" @click="deleteTableRow(props.ports,scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<style scoped>

</style>